<template>
  <div>
    <!-- 折叠表格 -->
    <el-table
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :data="permissionArr"
    >
      <el-table-column
        header-align="center"
        align="center"
        label="权限名称"
        prop="name"
      ></el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="权限字符串"
        prop="permission"
      ></el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="创建时间"
        prop="createTime"
      ></el-table-column>
      <el-table-column header-align="center" align="center" label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            size="small"
            :disabled="row.level === 3 ? true : false"
            @click="addPermission(row)"
          >
            {{ row.level === 2 ? '添加功能' : '添加菜单' }}
          </el-button>
          <el-button
            type="primary"
            size="small"
            :disabled="row.level === 0 ? true : false"
            @click="updatePermission(row)"
          >
            编辑
          </el-button>
          <el-popconfirm
            title="确定删除该菜单项?"
            @confirm="removeMenu(row)"
            width="180px"
          >
            <template #reference>
              <el-button
                type="primary"
                size="small"
                :disabled="row.level === 0 ? true : false"
              >
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加或修改菜单的对话框 -->
    <el-dialog
      v-model="dialogFormVisible"
      :title="menuData.id ? '修改菜单项' : '新增菜单项'"
    >
      <el-form label-width="70px">
        <el-form-item label="名称">
          <el-input
            placeholder="请输入菜单名称"
            v-model="menuData.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限值">
          <el-input
            placeholder="请输入权限字符串"
            v-model="menuData.permission"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import {
  reqAdd,
  reqDelete,
  reqGetAll,
  reqUpdate,
} from '@/api/mis/permission/index'
import type { Permission } from '@/api/mis/permission/type'
import { ElMessage, menuEmits } from 'element-plus'
// 存储获取到的菜单数据
const permissionArr = ref<Permission[]>()
// 控制对话框的显示与隐藏
const dialogFormVisible = ref<boolean>(false)
// 新增或修改菜单需要携带的参数
const menuData = reactive({
  id: 0,
  name: '',
  permission: '',
  level: 0,
  pid: 0,
})
// 组件挂载完成之后获取菜单数据
onMounted(() => {
  getHasPermission()
})
// 获取菜单数据的方法
const getHasPermission = async () => {
  const result = await reqGetAll()
  if (result.code == 0) {
    permissionArr.value = result.data
  }
}
// 新增菜单按钮的回调
const addPermission = (row: any) => {
  // 清理数据
  Object.assign(menuData, {
    name: '',
    permission: '',
    level: 0,
    pid: 0,
  })
  menuData.id = 0
  dialogFormVisible.value = true
  // 整理数据
  menuData.level = row.level + 1
  menuData.pid = row.id
}
// 编辑菜单按钮的回调
const updatePermission = (row: any) => {
  dialogFormVisible.value = true
  Object.assign(menuData, row)
}
// 新增或修改菜单最后确定按钮的回调
const save = async () => {
  let result: any
  if (menuData.id == 0) {
    result = await reqAdd(menuData)
  } else {
    result = await reqUpdate(menuData)
  }
  if (result.code === '0') {
    dialogFormVisible.value = false
    ElMessage({
      type: 'success',
      message: menuData.id ? '修改成功' : '新增成功',
    })
    getHasPermission()
  } else {
    ElMessage({
      type: 'error',
      message: menuData.id ? '修改失败' : '新增失败',
    })
  }
}
// 删除菜单项按钮的回调
const removeMenu = async (row: any) => {
  const params = {
    id: row.id,
  }
  const result = await reqDelete(params)
  if (result.code === '0') {
    ElMessage({ type: 'success', message: '删除成功' })
    getHasPermission()
  } else {
    ElMessage({ type: 'error', message: '删除失败' })
  }
}
</script>

<style scoped></style>
